<template>
  <div class="menu-container">
    <h3>用户信息</h3>
    <div class="user-info">
      <!-- 头像 -->
      <img src="./logo.png" alt="用户头像" class="avatar" />
      <!-- 用户名 -->
      <p><strong>用户名：</strong>{{ username }}</p>
      <p><strong>密码:</strong>{{ password }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const username = ref('')
const password = ref('')

onMounted(() => {
  const storedUsername = localStorage.getItem('username')
  const storedPassword = localStorage.getItem('password')
  username.value = storedUsername ? storedUsername : '未登录'
  password.value = storedPassword? storedPassword : '未登录'
})
</script>

<style scoped>
.menu-container {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.user-info {
  margin-top: 15px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

p {
  margin: 5px 0;
}
</style>